<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>庚书模版</title>
  <link href="../css/all.min.css" rel="stylesheet">
  <link href="../css/my-font.css" rel="stylesheet">

  <style>
        .text-shadow-gold {
            text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);
        }
        
        .text-shadow-black {
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
        
        .writing-vertical {
            writing-mode: vertical-rl;
            text-orientation: upright;
        }
        
        .book-page {
            background-image: url('../img/bg_gengshu.jpg');
            position: relative;
        }
        
        .book-page::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(200, 22, 29, 0.85);
            z-index: 1;
        }
        
        .book-page > * {
            position: relative;
            z-index: 2;
        }
        
        body {
            background-color: #f5f5f5;
            padding: 20px;
            text-align: center;
            font-family: 'SimSun', '宋体', serif;
        }
        
        .control-panel {
            background-color: rgb(200, 22, 29, 0.5);
            padding: 15px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            z-index: 1000;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        #fontStyleSelect{height: 30px;}
        
        .control-panel.fixed-right {
            position: fixed;
            display: flex;
            top: 50%;
            right: 0px;
            transform: translateY(-50%);
            width: 80px;
            flex-direction: column;
            align-items: center;
        }
        
        .font-control {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            align-items: center;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .btn-secondary {
            background-color: #f0f0f0;
            color: #333;
        }
        
        .btn-secondary:hover {
            background-color: #e0e0e0;
        }
        
        .gengshu-container {
            height: 710px;
            margin: 0 auto;
            padding: 40px 20px;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            margin-right: 100px;
        }
        
        .gengshu-title {
            position: absolute;
            top: 30px;
            right: 30px;
            color: #d4af37;
            font-size: 24px;
            font-weight: bold;
            writing-mode: vertical-rl;
            text-orientation: upright;
        }
        
        .column-container {
            display: flex;
            justify-content: space-between;
            height: 100%;
            direction: rtl;
        }
        
        .vertical-column {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            justify-content: center;
        }
        
        .vertical-text {
            color: #d4af37;
            font-size: 18px;
            line-height: 2.2;
            margin: 0 10px;
            text-align: center;
            writing-mode: vertical-rl;
            text-orientation: upright;
            white-space: nowrap;
        }

        font{
            writing-mode: vertical-rl;
            text-orientation: upright;
            white-space: nowrap;
        }
        
        .title-text {
            font-size: 36px !important;
            font-weight: bold;
            margin-bottom: 20px;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1001;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }
        
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            animation: modalFadeIn 0.3s;
        }
        
        @keyframes modalFadeIn {
            from {opacity: 0; transform: translateY(-50px);}
            to {opacity: 1; transform: translateY(0);}
        }
        
        .modal-header {
            padding: 10px 0;
            margin-bottom: 15px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .modal-title {
            margin: 0;
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
        
        .modal-body {
            margin-bottom: 20px;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .form-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="control-panel fixed-right">
        <div>
            <div class="flex justify-center space-x-2">
                <label class="flex items-center cursor-pointer">
                    <input type="radio" name="fontColor" value="gold" checked class="form-radio text-gengshu-gold">
                    <span class="ml-1 text-gengshu-gold font-bold text-xs">金色</span>
                </label>
                <label class="flex items-center cursor-pointer">
                    <input type="radio" name="fontColor" value="black" class="form-radio text-gengshu-black">
                    <span class="ml-1 text-gengshu-black font-bold text-xs">黑色</span>
                </label>
            </div>
        </div>
        
        <div>
            <select id="fontStyleSelect" class="w-full p-1 text-xs border border-accent/30 rounded focus:outline-none focus:ring-1 focus:ring-accent bg-white/80">
                <option value="'SimHei', '黑体', sans-serif">黑体</option>
                <option value="'MyFont-Regular', serif">手写体</option>
                <option value="'MyFont-pen', serif">行书</option>
                <option value="'MyFont-GB2312', serif">钢笔字</option>
                <option value="'MyFont-GB2313', serif">书写体</option>
                <option value="'MyFont-GB2316', serif">繁体字</option>
                <option value="'fangyuan14', serif">草书</option>
            </select>
        </div>
        
        <div class="font-control">
            <button id="decreaseFontBtn" class="btn btn-secondary text-xs flex justify-center">
                <i class="fa fa-minus" aria-hidden="true"></i>
            </button>
            <button id="increaseFontBtn" class="btn btn-secondary text-xs flex justify-center">
                <i class="fa fa-plus" aria-hidden="true"></i>
            </button>
        </div>
    </div>
    
    <div class="gengshu-container book-page">
        <div class="column-container">
            <div class="vertical-column">
                <div class="vertical-text title-text">合婚庚贴</div>
            </div>
            
            <div class="vertical-column">
                <div class="vertical-text"><font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);padding-bottom:100px;" contenteditable="true">张三</font></div>
            </div>

            <div class="vertical-column">
                <div class="vertical-text">
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);">送呈</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);padding-top: 100px;">亲家大人台启</font>
                </div>
            </div>
            
            <div class="vertical-column">
                <div class="vertical-text"><font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);padding-bottom:100px;" contenteditable="true">李四</font></div>
            </div>
            
            <div class="vertical-column">
                <div class="vertical-text"><font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);">喜今日赤绳系定 珠联璧合</font></div>
            </div>
            
            <div class="vertical-column">
                <div class="vertical-text"><font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);">卜他年白头永偕 桂馥兰馨</font></div>
            </div>
            
            <div class="vertical-column">
                <div class="vertical-text"><font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);" contenteditable="true">张小明</font></div>
            </div>

            
            <div class="vertical-column">
                <div class="vertical-text">
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);">乾造</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);" contenteditable="true">辛丑</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);">年</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);" contenteditable="true">壬辰</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);">月</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);" contenteditable="true">戊戌</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);">日</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);" contenteditable="true">壬子</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);">时</font>
                </div>
            </div>
            
            <div class="vertical-column">
                <div class="vertical-text">
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);">坤造</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);" contenteditable="true">辛丑</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);">年</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);" contenteditable="true">壬辰</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);">月</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);" contenteditable="true">戊戌</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);">日</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);" contenteditable="true">壬子</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);">时</font>
                </div>
            </div>
            
            <div class="vertical-column">
                <div class="vertical-text"><font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);" contenteditable="true">李大春</font></div>
            </div>
            
            <div class="vertical-column">
                <div class="vertical-text"><font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);">详查男女二命 大利年月</font></div>
            </div>
            
            <div class="vertical-column">
                <div class="vertical-text"><font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);">相生相合 实属可配之婚</font></div>
            </div>
            
            <div class="vertical-column">
                <div class="vertical-text"><font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);" contenteditable="true">王二</font></div>
            </div>
            
            <div class="vertical-column">
                <div class="vertical-text">
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);">愚亲</font>
                    <font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);padding-top:100px;">敬呈</font>
                </div>
            </div>
            
            <div class="vertical-column">
                <div class="vertical-text"><font style="color: #d4af37; font-size: 28px; line-height: 2.2; text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.8);" contenteditable="true">赵五</font></div>
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const textElements = document.querySelectorAll('.vertical-text');
            const fontElements = document.querySelectorAll('.vertical-text font');
            const titleElement = document.querySelector('.title-text');
            const gengshuContainer = document.querySelector('.gengshu-container');

            
            // 初始化字体大小
            let currentFontSize = 28; // 与CSS中的初始字体大小一致
            const titleRatio = 2; // 标题字体大小是正文的两倍
            
            // 字体颜色切换
            const fontColorRadios = document.querySelectorAll('input[name="fontColor"]');
            const editableElements = document.querySelectorAll('.vertical-text font[contenteditable="true"]');
            const nonEditableElements = document.querySelectorAll('.vertical-text font:not([contenteditable="true"])');
            
            fontColorRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    const color = this.value;
                    
                    // 根据选择的颜色，为可编辑和不可编辑元素设置相反的颜色
                    if (color === 'gold') {
                        // 可编辑元素为黑色，不可编辑元素为金色
                        editableElements.forEach(el => {
                            el.style.color = '#000000';
                            el.style.textShadow = '1px 1px 2px rgba(0, 0, 0, 0.5)';
                        });
                        
                        nonEditableElements.forEach(el => {
                            el.style.color = '#d4af37';
                            el.style.textShadow = '2px 2px 4px rgba(212, 175, 55, 0.8)';
                        });
                        
                        // 标题使用金色
                        titleElement.style.color = '#d4af37';
                        titleElement.style.textShadow = '2px 2px 4px rgba(212, 175, 55, 0.8)';
                    } else {
                        // 可编辑元素为金色，不可编辑元素为黑色
                        editableElements.forEach(el => {
                            el.style.color = '#d4af37';
                            el.style.textShadow = '2px 2px 4px rgba(212, 175, 55, 0.8)';
                        });
                        
                        nonEditableElements.forEach(el => {
                            el.style.color = '#000000';
                            el.style.textShadow = '1px 1px 2px rgba(0, 0, 0, 0.5)';
                        });
                        
                        // 标题使用黑色
                        titleElement.style.color = '#000000';
                        titleElement.style.textShadow = '1px 1px 2px rgba(0, 0, 0, 0.5)';
                    }
                });
            });
            
            // 初始化颜色设置
            fontColorRadios[0].dispatchEvent(new Event('change'));
            
            // 字体样式切换
            const fontStyleSelect = document.getElementById('fontStyleSelect');
            fontStyleSelect.addEventListener('change', function() {
                 const fontStyle = this.value;
                
                // 更新标题样式
                titleElement.style.fontFamily = fontStyle;
                
                // 更新其他文字样式
                fontElements.forEach(el => {
                    el.style.fontFamily = fontStyle;
                });
            });
            
            // 初始化字体样式
            fontStyleSelect.dispatchEvent(new Event('change'));
            
            // 字体大小调整
            const decreaseFontBtn = document.getElementById('decreaseFontBtn');
            const increaseFontBtn = document.getElementById('increaseFontBtn');
            
            decreaseFontBtn.addEventListener('click', function() {
                if (currentFontSize > 14) {
                    currentFontSize -= 2;
                    updateFontSizes();
                }
            });
            
            increaseFontBtn.addEventListener('click', function() {
                if (currentFontSize < 44) {
                    currentFontSize += 2;
                    updateFontSizes();
                }
            });
            
            function updateFontSizes() {
                // 更新标题字体大小（始终是正文的两倍）
                titleElement.style.fontSize = `${currentFontSize * titleRatio}px`;
                
                // 更新其他文字字体大小
                fontElements.forEach(el => {
                    el.style.fontSize = `${currentFontSize}px`;
                });
            }
            
            // 容器悬停效果
            gengshuContainer.addEventListener('mouseenter', function() {
                this.style.transform = 'scale(1.01)';
                this.style.transition = 'transform 0.3s ease';
            });
            
            gengshuContainer.addEventListener('mouseleave', function() {
                this.style.transform = 'scale(1)';
            });
        });
    </script>
</body>
</html>